import {Component, OnInit, Input, Output, OnChanges, SimpleChanges} from '@angular/core';
import {seriesData, optionsData} from './echarts.model';


@Component({
  selector: 'app-loss-electricity-echart',
  templateUrl: './loss-electricity-echart.component.html',
  styleUrls: ['./loss-electricity-echart.component.css']
})
export class LossElectricityEchartComponent implements OnInit {

  /**
   * echarts实例对象
   *
   */
  private echartsIntance: any = null;
  /**
   * 父组件输入echarts参数
   *
   */
  @Input() series: seriesData[];
  @Input() xAxisData: string[] = [];
  @Input() show1: boolean;
  @Input() show2: boolean;
  @Input() position1: string;
  @Input() position2: string;
  @Input() isTurb: boolean;

  options: optionsData;
  tooltip: object;
  color: string[];
  xAxis: object;
  yAxis: any[];
  grid: object;
  legend?: object;
  dataZoom?: any[];
  isFirst: boolean = true;

  constructor() {
  }

  ngOnInit() {

  }

  /**
   * 初始化echarts实例
   *
   */
  onChartInit(ec: any) {
    this.echartsIntance = ec;
  }

  /**
   * 更新echarts实例数据
   *
   */
  updateEchart() {
    if (this.echartsIntance != null) {
      this.options.tooltip = this.tooltip;
      this.options.series = this.series;
      this.echartsIntance.setOption(this.options);
    }
    ;
  }

  initOptions() {
    this.tooltip = {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
      this.legend = {
        data: [
          {
            name: '实发电量',
            textStyle: {color: '#22b14c'}
          },
          {
            name: '损失电量',
            textStyle: {color: '#a349a4'}
          },
          {
            name: '能量利用率',
            textStyle: {color: '#fff'}
          }
        ]
      }
    this.color = ['#22b14c', '#a349a4', '#fff'],
      this.grid = {
        left: '3%',
        right: '2%',
        bottom: '6%',
        containLabel: true
      },
      this.xAxis = {
        type: 'category',
        data: this.xAxisData,        //['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisPointer: {
          type: 'shadow'
        },
        axisLine: {
          lineStyle: {
            color: '#35789d',
            width: 2
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#43a0b3',
            fontSize: 12
          },
          margin: 10,
        },
      },
      this.yAxis = [
        {
          type: 'value',
          name: '电量：万kWh',
          show: this.show1,
          position: this.position1,//显示的位置
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#43a0b3'
            },
          },
          axisLine: {
            lineStyle: {
              color: '#35789d',
              width: 2
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#1b4268'
            }
          }
        },
        {
          type: 'value',
          name: '利用率',
          show: this.show2,//是否显示
          position: this.position2,//显示的位置
          axisLabel: {
            formatter: '{value} %',
            textStyle: {
              color: '#43a0b3'
            },
          },
          axisLine: {
            lineStyle: {
              color: '#35789d',
              width: 2
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#1b4268',

            }
          }

        }
      ]

    if (this.isTurb) {
      this.dataZoom = [{
        type: 'slider',
        bottom: 5,
        height: 10,
        start: 0,
        end: 20,
        borderColor: 'transparent',
        backgroundColor: '#e2e2e2',
        handleSize: 20,
        handleStyle: {
          shadowBlur: 6,
          shadowOffsetX: 1,
          shadowOffsetY: 2,
          shadowColor: '#aaa'
        },
        labelFormatter: ''
      }, {
        type: 'inside'
      }]
    }

    if (this.options == null) {
      this.options = {
        tooltip: this.tooltip,
        color: this.color,
        grid: this.grid,
        xAxis: this.xAxis,
        yAxis: this.yAxis,
        legend: this.legend,
        dataZoom: this.dataZoom,
        series: this.series
      };
    }

  }

  ngOnChanges(changes: SimpleChanges) {

    if (changes['series'] && changes['series'].currentValue) {
      if (!this.isFirst) {
        this.updateEchart();
      } else {
        this.isFirst = false;
        this.initOptions();
      }
    }

    if (changes['xAxisData'] && changes['xAxisData'].currentValue) {
      if (!this.isFirst && this.echartsIntance) {
        this.options.xAxis['data'] = this.xAxisData
        this.options.series = this.series;
        this.echartsIntance.setOption(this.options, true);
      } else {
        this.isFirst = false;
        this.initOptions();
      }
    }
  }

}


// WEBPACK FOOTER //
// ./src/app/module/data-analysis/loss-electricity/loss-electricity-echart/loss-electricity-echart.component.ts
